<script setup>
	import {getCurrentInstance, onMounted, ref} from "vue";
	import {
		getColumnByCode,
		getColumnPage,
		uploadRichImg,
		uploadRichFile,
		updColumn
	} from "@/api/config/column";
	import Pagination from "@/components/Pagination/index.vue";
	import Edit from "./edit.vue";
	import emitter from "@/utils/mitt";
	const {proxy} = getCurrentInstance();
	
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	});
	
	const viewFlag = [
		{
			label: '显示',
			value: '1',
			elTagType: 'primary',
		},
		{
			label: '隐藏',
			value: '0',
			elTagType: 'danger'
		},
	]
	const statusFlag = [
		{
			label: '可用',
			value: '1',
			elTagType: 'primary',
		},
		{
			label: '不可用',
			value: '0',
			elTagType: 'danger'
		},
	]
	
	const loading = ref(false);
	
	const tableData = ref([])
	const rowId = ref(null)
	const rowCode = ref(null)
	const total = ref(0)
	const search = () => {
		const params = queryParams.value
		getTableData(params)
	}
	const getTableData = async (params) => {
		loading.value = true
		const res = await getColumnPage(params)
		try {
			if(res.code === 200) {
				tableData.value = res.data
				total.value = res.data.total;
			}
		}
		catch(e) {
			console.log(e);
		}
		finally {
			setTimeout(() => {
				loading.value = false
			}, 100)
		}
	}
	
	// const handleDelete = async (row) => {
	// 	proxy.$modal.confirm('是否确认删除文章编号为"' + row.id + '"的数据项?').then(async function () {
	// 		const res = await delArticle({id: row.id})
	// 		try {
	// 			if(res.code === 200) {
	// 				proxy.$modal.msgSuccess('删除成功')
	// 				await getTableData(queryParams.value)
	// 			}
	// 		}
	// 		catch(e) {
	// 			console.log(e);
	// 		}
	// 	})
	// }
	
	const handleUpdate = async (row) => {
		rowId.value = row.id
		rowCode.value = row.code
		editVisible.value = true
	}
	
	const addArticle = () => {
		rowId.value = null
		rowCode.value = null
		editVisible.value = true
	}
	
	const editVisible = ref(false)
	const closeEdit = (ifSubmit = false) => {
		rowId.value = null
		rowCode.value = null
		editVisible.value = false
		if(ifSubmit) {
			search()
		}
	}
	
	onMounted(() => {
		search()
		emitter.on( 'closeEdit', (ifSubmit) => {
			closeEdit(ifSubmit)
		})
	})
	
</script>

<template>
	<div class="app-container">
		<el-table
			v-loading="loading"
			:data="tableData"
			border
			row-key="id"
			:tree-props="{ children: 'childrenList' }"
			:default-expand-all="true"
		>
			<el-table-column :show-overflow-tooltip="true" label="栏目名称" prop="name"/>
			<el-table-column label="是否可用" prop="status" width="80">
				<template #default="scope">
					<dict-tag :options="statusFlag" :value="String(scope.row.status)"/>
				</template>
			</el-table-column>
			<el-table-column label="是否隐藏" prop="isView" width="80">
				<template #default="scope">
					<dict-tag :options="viewFlag" :value="String(scope.row.isView)"/>
				</template>
			</el-table-column>
			<el-table-column label="栏目类型" prop="type" width="160">
				<template #default="scope">
					<span v-if="scope.row.type == 1">菜单</span>
					<span v-if="scope.row.type == 2">链接</span>
					<span v-if="scope.row.type == 3">列表</span>
					<span v-if="scope.row.type == 4">内容</span>
				</template>
			</el-table-column>
			<el-table-column label="排序值" prop="sort" width="70"/>
			<el-table-column class-name="small-padding fixed-width" label="操作" width="120">
				<template #default="scope">
					<el-button
						v-if="scope.row.parentId"
						:size="'small'"
						type="primary"
						icon="Edit"
						text
						@click="handleUpdate(scope.row)"
					>编辑
					</el-button>
					<!-- <el-button
						v-if="scope.row.parentId"
						:size="'small'"
						type="danger"
						icon="Delete"
						text
						@click="handleDelete(scope.row)"
					>删除
					</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="search"
		></pagination>
		
		<el-dialog
			v-model="editVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="rowId ? '修改文章' : '添加文章'"
			:width="'90%'"
			center
			destroy-on-close
			@close="closeEdit"
		>
			<edit class="dialogEdit" v-if="editVisible" :row-id="rowId" :row-code="rowCode" @close="closeEdit"></edit>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
	.dialogEdit {
		height: calc(82vh - 120px) !important;
	}
</style>
